﻿@{
    ViewData["Title"] = "Buttons";
    Layout = "~/Views/Shared/_Admin.cshtml";
}


@section Title{
    <h1>
        Buttons
        <small>Control panel</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">UI</a></li>
        <li class="active">Buttons</li>
    </ol>
}

<div class="row">
    <div class="col-md-6">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">基本</h3>
            </div>
            <div class="box-body pad ">
                <div class="col-md-12">
                    <button btn-type="Default">@BtnType.Default</button>
                    <button btn-type="Primary">@BtnType.Primary</button>
                    <button btn-type="Success">@BtnType.Success</button>
                    <button btn-type="Info">@BtnType.Info</button>
                    <button btn-type="Danger">@BtnType.Danger</button>
                    <button btn-type="Warning">@BtnType.Warning</button>
                </div>
                <div class="col-md-12">
                    <h3>.disabled</h3>
                    <button class="disabled" btn-type="Default">@BtnType.Default</button>
                    <button class="disabled" btn-type="Primary">@BtnType.Primary</button>
                    <button class="disabled" btn-type="Success">@BtnType.Success</button>
                    <button class="disabled" btn-type="Info">@BtnType.Info</button>
                    <button class="disabled" btn-type="Danger">@BtnType.Danger</button>
                    <button class="disabled" btn-type="Warning">@BtnType.Warning</button>
                </div>
                <div class="col-md-12">
                    <h3>.margin</h3>
                    <button class="margin" btn-type="Default">@BtnType.Default</button>
                    <button class="margin" btn-type="Primary">@BtnType.Primary</button>
                    <button class="margin" btn-type="Success">@BtnType.Success</button>
                    <button class="margin" btn-type="Info">@BtnType.Info</button>
                    <button class="margin" btn-type="Danger">@BtnType.Danger</button>
                    <button class="margin" btn-type="Warning">@BtnType.Warning</button>
                </div>
                <div class="col-md-12">
                    <h3>在btn-group内</h3>
                    <div class="btn-group">
                        <button btn-type="Default">@BtnType.Default</button>
                        <button btn-type="Default">@BtnType.Default</button>
                        <button btn-type="Primary">@BtnType.Primary</button>
                        <button btn-type="Success">@BtnType.Success</button>
                        <button btn-type="Info">@BtnType.Info</button>
                        <button btn-type="Danger">@BtnType.Danger</button>
                        <button btn-type="Warning">@BtnType.Warning</button>
                    </div>
                </div>
                <div class="col-md-12">
                    <h3>在btn-group-vertical内（竖）</h3>
                    <div class="btn-group-vertical">
                        <button btn-type="Default">@BtnType.Default</button>
                        <button btn-type="Primary">@BtnType.Primary</button>
                        <button btn-type="Success">@BtnType.Success</button>
                        <button btn-type="Info">@BtnType.Info</button>
                        <button btn-type="Danger">@BtnType.Danger</button>
                        <button btn-type="Warning">@BtnType.Warning</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">大小</h3>
            </div>
            <div class="box-body">
                <div class="col-md-12">
                    <button btn-type="Default" class="btn-xs">.btn-xs</button>
                    <button class="btn-sm" btn-type="Primary">.btn-sm</button>
                    <button btn-type="Success">Normal</button>
                    <button  class="btn-lg" btn-type="Info">.btn-lg</button>
                </div>
                <div class="col-md-12">
                    <h3>.btn-block</h3>
                    <button class="btn-block" btn-type="Success">width:100%</button>
                </div>
                <div class="col-md-12">
                    <h3>.btn-group-xs</h3>
                    <div class="btn-group-xs">
                        <button btn-type="Default">@BtnType.Default</button>
                        <button btn-type="Primary">@BtnType.Primary</button>
                        <button btn-type="Success">@BtnType.Success</button>
                        <button btn-type="Info">@BtnType.Info</button>
                        <button btn-type="Danger">@BtnType.Danger</button>
                        <button btn-type="Warning">@BtnType.Warning</button>
                    </div>
                </div>
                <div class="col-md-12">
                    <h3>.btn-group-sm</h3>
                    <div class="btn-group-sm">
                        <button btn-type="Default">@BtnType.Default</button>
                        <button btn-type="Primary">@BtnType.Primary</button>
                        <button btn-type="Success">@BtnType.Success</button>
                        <button btn-type="Info">@BtnType.Info</button>
                        <button btn-type="Danger">@BtnType.Danger</button>
                        <button btn-type="Warning">@BtnType.Warning</button>
                    </div>
                </div>
                <div class="col-md-12">
                    <h3>.btn-group</h3>
                    <div class="btn-group">
                        <button btn-type="Default">@BtnType.Default</button>
                        <button btn-type="Primary">@BtnType.Primary</button>
                        <button btn-type="Success">@BtnType.Success</button>
                        <button btn-type="Info">@BtnType.Info</button>
                        <button btn-type="Danger">@BtnType.Danger</button>
                        <button btn-type="Warning">@BtnType.Warning</button>
                    </div>
                </div>
                <div class="col-md-12">
                    <h3>.btn-group-lg</h3>
                    <div class="btn-group-lg">
                        <button btn-type="Default">@BtnType.Default</button>
                        <button btn-type="Primary">@BtnType.Primary</button>
                        <button btn-type="Success">@BtnType.Success</button>
                        <button btn-type="Info">@BtnType.Info</button>
                        <button btn-type="Danger">@BtnType.Danger</button>
                        <button btn-type="Warning">@BtnType.Warning</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Application Buttons</h3>
            </div>
            <div class="box-body">
                <div class="col-md-12">
                    <button class="btn-app">
                        <i class="fa fa-edit"></i> Edit
                    </button>
                    <button class="btn-app">
                        <i class="fa fa-play"></i> Play
                    </button>
                    <button class="btn-app">
                        <i class="fa fa-repeat"></i> Repeat
                    </button>
                    <button class="btn-app">
                        <i class="fa fa-pause"></i> Pause
                    </button>
                    <button class="btn-app">
                        <i class="fa fa-save"></i> Save
                    </button>
                    <button class="btn-app">
                        <span class="badge bg-yellow">3</span>
                        <i class="fa fa-bullhorn"></i> bullhorn
                    </button>
                    <button class="btn-app">
                        <span class="badge bg-aqua">12</span>
                        <i class="fa fa-envelope"></i> envelope
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">其它颜色</h3>
            </div>
            <div class="box-body">

                <p>
                    Mix and match with various background colors. Use base class <code>.btn</code> and add any available
                    <code>.bg-*</code> class
                </p>
                <p>
                    <button type="button" class="bg-maroon">.btn.bg-maroon.btn-flat</button>
                    <button type="button" class="bg-purple">.btn.bg-purple.btn-flat</button>
                    <button type="button" class="bg-navy">.btn.bg-navy.btn-flat</button>
                    <button type="button" class="bg-orange">.btn.bg-orange.btn-flat</button>
                    <button type="button" class="bg-olive margin">.btn.bg-olive.btn-flat</button>
                </p>
                <p>
                    <button type="button" class="bg-maroon margin">.btn.bg-maroon</button>
                    <button type="button" class="bg-purple margin">.btn.bg-purple</button>
                    <button type="button" class="bg-navy margin">.btn.bg-navy</button>
                    <button type="button" class="bg-orange margin">.btn.bg-orange</button>
                    <button type="button" class="bg-olive margin">.btn.bg-olive</button>
                </p>

            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">
                    Social Buttons (By <a href="https://github.com/lipis/bootstrap-social">Lipis</a>)
                </h3>
            </div>
            <div class="box-body">
                <button class="btn-social btn-bitbucket">
                    <i class="fa fa-bitbucket"></i> Sign in with Bitbucket
                </button>
                <a class="btn btn-block btn-social btn-dropbox">
                    <i class="fa fa-dropbox"></i> Sign in with Dropbox
                </a>
                <a class="btn btn-block btn-social btn-facebook">
                    <i class="fa fa-facebook"></i> Sign in with Facebook
                </a>
                <a class="btn btn-block btn-social btn-flickr">
                    <i class="fa fa-flickr"></i> Sign in with Flickr
                </a>
                <a class="btn btn-block btn-social btn-foursquare">
                    <i class="fa fa-foursquare"></i> Sign in with Foursquare
                </a>
                <a class="btn btn-block btn-social btn-github">
                    <i class="fa fa-github"></i> Sign in with GitHub
                </a>
                <a class="btn btn-block btn-social btn-google">
                    <i class="fa fa-google-plus"></i> Sign in with Google
                </a>
                <a class="btn btn-block btn-social btn-instagram">
                    <i class="fa fa-instagram"></i> Sign in with Instagram
                </a>
                <a class="btn btn-block btn-social btn-linkedin">
                    <i class="fa fa-linkedin"></i> Sign in with LinkedIn
                </a>
                <a class="btn btn-block btn-social btn-tumblr">
                    <i class="fa fa-tumblr"></i> Sign in with Tumblr
                </a>
                <a class="btn btn-block btn-social btn-twitter">
                    <i class="fa fa-twitter"></i> Sign in with Twitter
                </a>
                <a class="btn btn-block btn-social btn-vk">
                    <i class="fa fa-vk"></i> Sign in with VK
                </a>
                <br>
                <div class="text-center">
                    <button class="btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></button>
                    <a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a>
                    <a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
                    <a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a>
                    <a class="btn btn-social-icon btn-foursquare"><i class="fa fa-foursquare"></i></a>
                    <a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a>
                    <a class="btn btn-social-icon btn-google"><i class="fa fa-google-plus"></i></a>
                    <a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a>
                    <a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
                    <a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a>
                    <a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a>
                    <a class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
